<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><router-link to="/reporting/dayInquiries">日报查询</router-link></el-breadcrumb-item>
        <el-breadcrumb-item>日报查询详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <basic-container>
      <div>
        <el-row :gutter="20" class="common-height">
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">汇报编号：{{categoryForm.reportSn}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">上报类型：{{categoryForm.reportType}}</div>         
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">汇报内容：{{categoryForm.reportContent}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">汇报位置：{{categoryForm.reportAddress}}</div>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="common-height">
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">汇报人：{{categoryForm.reportMan}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">汇报日期：{{categoryForm.reportTime}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">汇报手机号：{{categoryForm.reportTel}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">状态：{{categoryForm.status}}</div>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="common-height">
          <!-- <el-col :span="6">
            <div class="grid-content bg-purple text-left">创建时间：{{categoryForm.createDate}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">更新者：{{categoryForm.updateBy}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">更新时间：{{categoryForm.updateDate}}</div>
          </el-col> -->
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">备注信息：{{categoryForm.remarks}}</div>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="common-height">
          <el-col :span="24">
            <div class="grid-content bg-purple text-left flex">
              <div>图片列表：</div>
              <div v-if="categoryForm.photoList" class="thumbUrl m-l" v-for="(item,index) in categoryForm.photoList">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="item.picUrl" 
                  :preview-src-list="[item.picUrl]"/>
              </div>
            </div>
          </el-col>
        </el-row>

        <div style="text-align: center;">
          <el-button type="default" size="medium" @click="back">返回</el-button>
        </div>
      </div>
    </basic-container>
    
  </div>
</template>

<script>
  import { getReportInfo } from '@/api/crm/workreport';
  import { fetchDict } from '@/util/util';
  import { getStatusName } from '@/const/common/tool';
  export default {
    data() {
      return {
        categoryForm:{},
        report_status: [],
        work_report: [],
      }
    },
    created(){
      this.getReportDetail();
    },
    methods: {
      async getReportDetail() {
        let query = {
            reportSn: JSON.parse(this.$route.query.res).reportSn,
        };
        await fetchDict('scm_report_status', this.report_status);
        await fetchDict('scm_work_report', this.work_report);
        let res = await getReportInfo(query);
        this.categoryForm = res.data.data;
        this.categoryForm.reportType = getStatusName(this.work_report, this.categoryForm.reportType);
        this.categoryForm.status = getStatusName(this.report_status, this.categoryForm.status);
      },
      back(){
        this.$router.push({path: '/reporting/dayInquiries'});
      },
    }
  }
</script>

<style scoped lang="scss">
  .text-left {
    text-align: left;
    margin-left: 10px;
  }
  .thumbUrl {
    display: inline-block;
  }
  .crumbs{
    margin: 20px 10px;
  }
</style>
